<template>
    <div class="app-container content">
        <el-row>
            <el-col :span="20">
                <el-form ref="queryRef" label-width="80px" label-position="left">
                    <el-form-item label="版本号">{{ route.query.versionCode }}</el-form-item>
                </el-form>
            </el-col>
            <el-col :span="4" style="display:flex;justify-content:right">
                <el-button style="" type="primary" icon="Edit"  @click="handleExport">导出</el-button>
            </el-col>
        </el-row>
        <el-divider />
        <el-table v-loading="loading" ref="tableRef" :data="dataList" border :header-cell-class-name="must">
            <el-table-column label="行政代码" align="center" prop="name" />
            <el-table-column label="名称" align="center" prop="code" />
        </el-table>

        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.page" v-model:limit="queryParams.rows"
            @pagination="getList" />
    </div>
</template>


<script setup name="dataView">
import { getAll } from '@/api/essentialData/dataView.js'
const route = useRoute();
const dataList = ref([]);
const loading = ref(false);
const total = ref(0);

const data = reactive({
    queryParams: {
        page: 1,
        rows: 10,
    },
})
const { queryParams } = toRefs(data);

function must(obj){
	if(obj.columnIndex == 0 || obj.columnIndex == 1 ) {
		return 'must';
	}
}

/** 导出按钮操作 */
function handleExport () {
    proxy.download('/datacenter/sysDataVersion/dataExport', {}, `数据视图${new Date().getTime()}.xls`)

    // let name = '';
    // if (route.query.dataTypeCode == 'sjxzq') {
    //     name = `数据视图${new Date().getTime()}.xls`
    // }
    // proxy.download('/datacenter/sysDataVersion/dataExport', {}, name)
}

/** 查询数据列表 */
function getList () {
    loading.value = true;
    getAll({ ...queryParams.value, ...route.query }).then(response => {
        dataList.value = response.data.list ? response.data.list : [];
        total.value = response.data.total;
        loading.value = false;
    });
}

getList();
</script>

<style>
.content{
  padding:20px 200px;
}

:deep(.el-table) td.el-table__cell {
  border-bottom: 1px solid #ebeef5 !important;
  border-right: 1px solid #ebeef5 !important;
}
/* 
.el-table__header-wrapper th.star ::before {
  content: '*';
  color: red;
  margin-right: 0.02rem;
  font-size: 0.12rem;
  } */

  .el-table th.must>.cell:before {
	content: '*';
	color: #ff1818;
}
</style>